<template>
	<view class="work-container">
		<!-- 导航 -->
		<view class="rljs-nav">
			<view :class="index==4?'active':'rljs-title'" @click="clickNav(4)">
				{{ $t('search:motor') }}
			</view>
			<view :class="index==5?'active':'rljs-title'" @click="clickNav(5)">
				{{ $t('search:twoWheeler') }}
			</view>
			<view :class="index==6?'active':'rljs-title'" @click="clickNav(6)">
				{{ $t('search:tricycle') }}
			</view>
		</view>
		<view class="rljs-box">
			<view class="rljs-img">
				<upload @urlArr="jdcjsImg" ref="child"></upload>
			</view>
			<view class="rljs-list">
				<uni-forms ref="baseForm" :modelValue="form" label-width="200rpx" label-align="left">
					<uni-forms-item :label="$t('search:captureCamera')">
						<view @click="handleDevicesOpen" class="sbBox">
							{{nodeListCopy}}
						</view>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:timeType')" name="monitorTimeType">
						<uni-data-picker :placeholder="$t('search:pleaseSelect')" :localdata="[
							{ text: $t('search:oneDay'), value: 1 },
							{ text: $t('search:threeDays'), value: 3 },
							{ text: $t('search:oneWeek'), value: 7 },
							{ text: $t('search:tenDays'), value: 10 },
							{ text: $t('search:oneMonth'), value: 30 },
							{ text: $t('search:custom'), value: 19 }
						]" v-model="monitorTimeType" @change='changeMonitorTime'>
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item :label="$t('search:startTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeB" :clear-icon="false" :disabled="monitorTimeType != 19" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:endTime')">
						<uni-datetime-picker type="datetime" return-type="timestamp" v-model="form.captureTimeE" :clear-icon="false" :disabled="monitorTimeType != 19" />
					</uni-forms-item>
					<uni-forms-item :label="$t('search:threshold')">
						<uni-easyinput @focus="hideTabbar" @blur="showTabbar" v-model="form.thresholdMin"
							:placeholder="$t('search:enterThreshold')" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="btn">
				<button type="primary" v-if="tabbar" @click="motorVehicle()">{{ $t('search:search') }}</button>
			</view>
		</view>
		
		<devicesTree ref='devicesTree' @onOk="setDevides" />
	</view>
</template>

<script>
	import upload from "@/components/upload/index.vue"
	import devicesTree from '@/components/devicesTree/devicesTree.vue'
	
	export default {
		components: {
			upload,
			devicesTree
		},
		data() {
			return {
				index: 4,
				monitorTimeType: 1,
				form: {
					captureTimeB: "",
					captureTimeE: "",
					imgList: [],
					devicesTree: [],
					thresholdMax: 1,
					thresholdMin: "70",
					imgType: 2,
					timeType: 1,
					topN: 100
				},
				nodeListCopy: this.$t('search:pleaseSelect'),
				tabbar: true,
			}
		},
		onLoad(e) {
			if (e.param) {
				var param = JSON.parse(e.param)
				console.log('onLoad', JSON.parse(e.param))
				if (param.imgUrl != null && param.imgUrl != '') {
					this.index = param.showType ? param.showType :4
					if (param.showType == 4) {
						this.form.imgList = [param.imgUrl]
						var arr = []
						var img = {
							showUrl: param.imgUrl,
							from: 1
						}
						arr.push(img)
						this.$nextTick(() => {
							this.$refs.child.setFileList(arr)
						})
					}
					if (param.showType == 2 || param.showType == 3) {
						var arr = []
						var img = {
							showUrl: param.imgUrl,
							from: 1
						}
						arr.push(img)
						this.$nextTick(() => {
							this.$refs.child.setFileList(arr)
						})
					}
				}
			}

			// 一天的毫秒数
			const MillisecondsADay = 24 * 60 * 60 * 1000 * 1
			// 当前时间戳
			var timestamp = Date.parse(new Date());
			// 昨天时间戳
			var timestampStart = timestamp - MillisecondsADay;
			var timestampEnd = timestamp
			this.form.captureTimeE = timestampEnd
			this.form.captureTimeB = timestampStart
			// this.formTricycle.captureTimeE = timestampEnd
			// this.formTricycle.captureTimeB = timestampStart

			uni.onWindowResize((res) => {
				if (res.size.windowHeight < this.windowHeight) {
					this.tabbar = false
				} else {
					this.tabbar = true
				}
			})
		},
		methods: {
			showTabbar() {
				this.tabbar = true;
			},
			hideTabbar() {
				this.tabbar = false;
			},
			clickNav(index) {
				this.index = index
				this.$refs.child.clear()
				// if (index == 2) {
				// 	this.formTricycle.nonVehicleQueryType = 0
				// 	this.$delete(this.formTricycle, 'nonVehicleType')
				// } else if (index == 3) {
				// 	this.formTricycle.nonVehicleQueryType = 1
				// 	this.formTricycle.nonVehicleType = 2
				// }
			},
			// 机动车图片
			jdcjsImg(e) {
				if (e != null) {
					let arr = []
					arr.push(e)
					this.form.imgList = arr
				} else {
					this.form.imgList = []
				}
			},
			// 机动车检索
			motorVehicle(index) {
				if (this.form.imgList.length === 0) {
					uni.showToast({
						title: this.$t('search:uploadImage'),
						icon: 'none',
						duration: 1500
					});
					return
				}
				// index: 1 => type: 4
				// index: 2||3 => type: 5
				uni.navigateTo({
					url: `/pages/search/jsjg/index?data=${encodeURIComponent(JSON.stringify(this.form))}&type=${this.index}`
				})
			},
			// 两，三轮车检索
			// tricycle(index) {
			// 	uni.navigateTo({
			// 		url: `/pages/search/jsjg/index?data=${encodeURIComponent(JSON.stringify(this.formTricycle))}&type=${index}&fromType=` + this.index
			// 	})
			// },
			changeMonitorTime({
				detail: {
					value
				}
			}) {
				const monitorTimeType = value[0].value
				if (monitorTimeType != 19) {
					const timestamp = new Date().getTime()
					this.form.captureTimeB = timestamp - monitorTimeType * 24 * 60 * 60 * 1000
					this.form.captureTimeE = timestamp
				}
			},
			handleDevicesOpen() {
				this.$refs.devicesTree.open()
			},
			setDevides(id, labels) {
			    this.form.devicesTree = id
			    this.nodeListCopy = labels || this.$t('search:pleaseSelect')
			},
		},
	}
</script>

<style scoped>
	page {
		background-color: #fff;
	}

	.rljs-nav {
		position: fixed;
		top: 80rpx;
		width: 750rpx;
		height: 80rpx;
		background-color: #f1f1f1;
		display: flex;
		justify-content: space-evenly;
		z-index: 50;
	}

	.rljs-title {
		line-height: 80rpx;
	}

	.active {
		line-height: 80rpx;
		color: #0081ff;
		border-bottom: 2px solid #0081ff;
	}

	.rljs-img {
		padding: 40rpx 0;
	}

	.rljs-img>>>.file-picker__box {
		position: relative;
		width: 40%;
		height: 0;
		margin: auto;
		padding-top: 40%;
		box-sizing: border-box;
	}

	.rljs-list {
		padding: 0rpx 60rpx;
	}

	.rljs-list .uni-forms-item {
		border-bottom: 1px solid #dedede;
		margin-bottom: 0rpx;
		padding: 5rpx 0;
	}

	.rljs-list>>>.uni-input-input {
		color: #333;
	}

	.rljs-list>>>.input-value-border {
		border: none;
	}

	.rljs-list>>>.uni-text {
		display: none;
	}

	.rljs-list>>>.placeholder {
		font-size: 28rpx;
	}

	.rljs-list>>>.uni-date-x--border {
		border: none;
	}

	.rljs-list>>>.uni-icons {
		display: none;
	}
	
	.rljs-list>>>.uni-date .uni-icons {
		display: block;
	}

	.rljs-list>>>.is-input-border {
		border: none;
	}

	.rljs-list>>>.uni-easyinput__placeholder-class {
		font-size: 28rpx;
	}

	.rljs-list>>>.uni-date__x-input {
		padding: 0;
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		background-color: #fff;
	}

	.btn button {
		margin: 0rpx 50rpx 50rpx 50rpx;
		font-size: 30rpx;
	}

	.rljs-box {
		width: 750rpx;
		margin-top: 80rpx;
		padding-bottom: 200rpx;
	}

	.rljs-img>>>.imgClass {
		width: 250rpx;
		height: 350rpx;
		margin: 0 auto;
	}
	
	.sbBox {
		width: 428rpx;
		line-height: 72rpx;
		padding: 0 10rpx 0 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>